/**************************************
 *
 * VLOOK CSS 字体主题、圆角样式
 * (配合 base.less 进行使用)
 *
 * V14.0
 * 2022-03-13
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * email: maxchow@qq.com
 *
 * https://github.com/MadMaxChow/VLOOK
 * https://gitee.com/madmaxchow/VLOOK
 *
 *************************************/

@fontSize: 1em; // 16px
@fontSizeXL: 1.125em; // 18px
@fontSizeXXL: 1.25em; // 20px

// Rangs of font-weight:
//   100 - Thin
//   200 - Extra Light (Ultra Light)
//   300 - Light
//   400 - Regular (Normal、Book、Roman)
//   500 - Medium
//   600 - Semi Bold (Demi Bold)
//   700 - Bold
//   800 - Extra Bold (Ultra Bold)
//   900 - Black (Heavy)

@font-face {
    font-family: "color-emoji";
    src: local("Apple Color Emoji"),
         local("Segoe UI Emoji"),
         local("Segoe UI Symbol"),
         local("Noto Color Emoji");
    // 适用的编码范围
    unicode-range: U+203C-203C, U+2049-2049, U+2139-2139, U+2194-2199, U+21A9-21AA, U+231A-231B, U+2328-2328, U+23CF-23CF, U+23E9-23F3, U+23F8-23FA, U+24C2-24C2, U+25AA-25AB, U+25B6-25B6, U+25C0-25C0, U+25FB-25FE, U+2600-2604, U+260E-260E, U+2611-2611, U+2614-2615, U+2618-2618, U+261D-261D, U+2620-2620, U+2622-2623, U+2626-2626, U+262A-262A, U+262E-262F, U+2638-263A, U+2640-2640, U+2642-2642, U+2648-2653, U+265F-2660, U+2663-2663, U+2665-2666, U+2668-2668, U+267B-267B, U+267E-267F, U+2692-2697, U+2699-2699, U+269B-269C, U+26A0-26A1, U+26A7-26A7, U+26AA-26AB, U+26B0-26B1, U+26BD-26BE, U+26C4-26C5, U+26C8-26C8, U+26CE-26CF, U+26D1-26D1, U+26D3-26D4, U+26E9-26EA, U+26F0-26F5, U+26F7-26FA, U+26FD-26FD, U+2702-2702, U+2705-2705, U+2708-270D, U+270F-270F, U+2712-2712, U+2714-2714, U+2716-2716, U+271D-271D, U+2721-2721, U+2728-2728, U+2733-2734, U+2744-2744, U+2747-2747, U+274C-274C, U+274E-274E, U+2753-2755, U+2757-2757, U+2763-2764, U+2795-2797, U+27A1-27A1, U+27B0-27B0, U+27BF-27BF, U+2934-2935, U+2B05-2B07, U+2B1B-2B1C, U+2B50-2B50, U+2B55-2B55, U+3030-3030, U+303D-303D, U+3297-3297, U+3299-3299, U+1F000-1FAFF;
    // U+00A9-00A9, U+00AE-00AE, U+2122-2122,
    // 参考链接：
    // https://unicode-table.com/cn/blocks/mahjong-tiles/
    // ...
    // https://unicode-table.com/cn/blocks/miscellaneous-technical/
}

@unicodeRangeForDigital: U+0021-002F, // !"#$%&'()*+,-./（不含空格）
U+0030-0039, // 0123456789
U+003A-0040, // :;<=>?@
U+005B-0060, // [\]^_`
U+007B-007E; // {|}~
@font-face {
    font-family: "VLOOK Digital Sans CSS";
    // font-weight: bold !important;
    src: local("Noto Sans Mono"), local("Menlo"), local("Consolas");
    // 适用的编码范围
    unicode-range: @unicodeRangeForDigital;
}
@font-face {
    font-family: "VLOOK Digital Serif CSS";
    // font-weight: bold !important;
    src: local("Luxi Mono"), local("Menlo"), local("Consolas");
    // 适用的编码范围
    unicode-range: @unicodeRangeForDigital;
}
@vlookDigitalSans: "VLOOK Digital Sans, VLOOK Digital Sans CSS";
@vlookDigitalSerif: "VLOOK Digital Serif, VLOOK Digital Serif CSS";

// =========================================
// 基础字体信息
// -----------------------------------------
// Emoji / symbol 等符号字体
@emoji: "color-emoji";
// 基础等宽字体
@base_mono: Courier, "Courier New";
// 数值字体
@number_font: "VLOOK Number", "Altinn-DIN", "Bebas Neue", "DIN";
// 基础非衬线字体
@base_sans_en: "Helvetica Neue", Helvetica, Arial, Tahoma;
@base_sans_cn: "PingFang SC", "PingFang TC", "PingFang HK", SimHei, "黑体";
@base_mono_sans_en: "VLOOK Sans Mono", "Noto Sans Mono", Iosevka, "SF Mono", Menlo, "Cascadia Mono", Consolas, @base_mono;
// 基础衬线字体
@base_serif_en: "Times New Roman", Times;
@base_serif_cn: "Songti SC", STZhongsong, "华文中宋", SimSun, "宋体";
@base_mono_serif_en: "VLOOK Serif Mono", "Luxi Mono", "Iosevka Slab", "PT Mono", @base_mono, @base_mono_sans_en;
// 字体主题集
@base_noto_sans_sets: "Noto Sans CJK SC", "Noto Sans CJK HK", "Noto Sans CJK TW";
@base_noto_serif_sets: "Noto Serif CJK SC", "Noto Serif CJK HK", "Noto Serif CJK TW";
@base_source_sans_sets: "思源黑体", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans HK", "Source Han Sans HC", "Source Han Sans TW", "Source Han Sans TC";
@base_source_serif_sets: "思源宋体", "Source Han Serif SC", "Source Han Serif CN", "Source Han Serif HK", "Source Han Serif HC", "Source Han Serif TW", "Source Han Serif TC";

//=========================================
// 非衬线风格字体信息
// ----------------------------------------
// Microsoft YaHei 微软雅黑
@msyh: "Microsoft YaHei", "微软雅黑", @base_sans_cn, sans-serif;
@msyh_mono: "Microsoft YaHei", "微软雅黑", @base_sans_cn, monospace;
// ----------------------------------------
// Microsoft JhengHei 微軟正黑體
@msjh: "Microsoft JhengHei", "微軟正黑體", @base_sans_cn, sans-serif;
@msjh_mono: "Microsoft JhengHei", "微軟正黑體", @base_sans_cn, monospace;
// ----------------------------------------
// 思源黑体
@noto: "VLOOK Sans", @base_noto_sans_sets, @base_source_sans_sets, -apple-system, Roboto, @msyh, @msjh;
@noto_mono: @base_mono_sans_en, "VLOOK Sans", @base_noto_sans_sets, @base_source_sans_sets, -apple-system, Roboto, @msyh_mono, @msjh_mono;
@noto_fw_bold: 900;
@noto_fw_text: normal;
// ---
@sansFont: @noto;
@monoSansFont: @noto_mono;
@fontBoldWeight4Sans: @noto_fw_bold;
@fontBoldWeightText4Sans: @noto_fw_text;

//=========================================
// 衬线混搭风格字体信息
// ----------------------------------------
// 思源宋体＋黑体
@cross_noto_serif: "VLOOK Serif", @base_noto_serif_sets, @base_source_serif_sets, @base_serif_en, @base_serif_cn, serif;
@cross_noto_bold: "VLOOK Sans", @base_noto_sans_sets, @base_source_sans_sets, @base_sans_en, @base_sans_cn, sans-serif;
@cross_noto_title: @cross_noto_serif;
@cross_noto_header: @cross_noto_serif;
@cross_noto_mono: @base_mono_serif_en, "VLOOK Serif", @base_noto_serif_sets, @base_source_serif_sets, @base_serif_en, @base_serif_cn, monospace;
@cross_noto_fw_bold: bold;
@cross_noto_fw_title: 900;
@cross_noto_fw_text: 500;
// ---
@serifFont: @cross_noto_serif;
@serifBoldFont: @cross_noto_bold;
@serifTitle: @cross_noto_title;
@serifHeader: @cross_noto_header;
@monoSerifFont: @cross_noto_mono;
@fontBoldWeight4Serif: @cross_noto_fw_bold;
@fontBoldWeight4Title: @cross_noto_fw_title;
@fontBoldWeightText4Serif: @cross_noto_fw_text;

//=========================================
// 不同字体风格配置集
:root {
    // ---
    // 非衬线风格 Sans
    --v-f-fm-title-sans: @emoji, @sansFont;
    --v-f-fm-subtitle-sans: @emoji, @sansFont;
    --v-f-fm-h-sans: @emoji, @sansFont;
    --v-f-fm-text-sans: @emoji, @vlookDigitalSans, @sansFont;
    --v-f-fm-bd-sans: @emoji, @vlookDigitalSans, @sansFont;
    --v-f-fm-key-sans: @sansFont;
    --v-f-fm-num-sans: @emoji, @number_font, @base_mono_sans_en, @sansFont;
    --v-f-fm-tag-sans: @emoji, @sansFont;
    --v-f-fm-code-sans: @emoji, @monoSansFont;
    --v-f-w-bd-sans: @fontBoldWeight4Sans;
    --v-f-w-title-sans: @fontBoldWeight4Sans;
    --v-f-w-text-sans: @fontBoldWeightText4Sans;

    // ---
    // 衬线+非衬线混排风格 Serif + Sans
    --v-f-fm-title-serif: @emoji, @serifTitle;
    --v-f-fm-subtitle-serif: @emoji, @serifBoldFont;
    --v-f-fm-h-serif: @emoji, @serifHeader;
    --v-f-fm-text-serif: @emoji, @vlookDigitalSerif, @serifFont;
    --v-f-fm-bd-serif: @emoji, @vlookDigitalSans, @serifBoldFont;
    --v-f-fm-key-serif: @serifBoldFont;
    --v-f-fm-num-serif: @emoji, @number_font, @base_mono_sans_en, @sansFont;
    --v-f-fm-tag-serif: @emoji, @serifBoldFont;
    --v-f-fm-code-serif: @emoji, @monoSerifFont;
    --v-f-w-bd-serif: @fontBoldWeight4Serif;
    --v-f-w-title-serif: @fontBoldWeight4Title;
    --v-f-w-text-serif: @fontBoldWeightText4Serif;
}
// ---
// 应用 Sans 风格
.applyFontStyle(@fontStyle) when (@fontStyle = sans) {
    :root {
        --v-f-theme: sans; // 默认字体风格
        --v-f-fm-title: var(--v-f-fm-title-sans);
        --v-f-fm-subtitle: var(--v-f-fm-subtitle-sans);
        --v-f-fm-h: var(--v-f-fm-h-sans);
        --v-f-fm-text: var(--v-f-fm-text-sans);
        --v-f-fm-bd: var(--v-f-fm-bd-sans);
        --v-f-fm-key: var(--v-f-fm-key-sans);
        --v-f-fm-num: var(--v-f-fm-num-sans);
        --v-f-fm-tag: var(--v-f-fm-tag-sans);
        --v-f-fm-code: var(--v-f-fm-code-sans);
        --v-f-w-bd: var(--v-f-w-bd-sans);
        --v-f-w-title: var(--v-f-w-title-sans);
        --v-f-w-text: var(--v-f-w-text-sans);
    }
}
// ---
// 应用 Serif 风格
.applyFontStyle(@fontStyle) when (@fontStyle = serif) {
    :root {
        --v-f-theme: serif; // 默认字体风格
        --v-f-fm-title: var(--v-f-fm-title-serif);
        --v-f-fm-subtitle: var(--v-f-fm-subtitle-serif);
        --v-f-fm-h: var(--v-f-fm-h-serif);
        --v-f-fm-text: var(--v-f-fm-text-serif);
        --v-f-fm-bd: var(--v-f-fm-bd-serif);
        --v-f-fm-key: var(--v-f-fm-key-serif);
        --v-f-fm-num: var(--v-f-fm-num-serif);
        --v-f-fm-tag: var(--v-f-fm-tag-serif);
        --v-f-fm-code: var(--v-f-fm-code-serif);
        --v-f-w-bd: var(--v-f-w-bd-serif);
        --v-f-w-title: var(--v-f-w-title-serif);
        --v-f-w-text: var(--v-f-w-text-serif);
    }
}

//=========================================
// 配套圆角风格集
:root {
    // ---
    // 小号圆角
    --v-r-b-small: 8px; // 标准圆角
    --v-r-s-small: 4px; // 标准圆角内的小圆角
    --v-r-t-small: 6px; // 表格圆角
    --v-r-si-small: calc(var(--v-r-t-small)- 2px); // 标准圆角内的小圆角
    --v-r-tag-small: 0.3em; // 标签圆角
    // --v-tag-small-radius-small: 0.25em; // 标签小圆角
    --v-r-c-small: 50%; // 半距圆角

    // ---
    // 大号圆角
    --v-r-b-big: 12px; // 标准圆角
    --v-r-s-big: 6px; // 标准圆角内的小圆角
    --v-r-t-big: 10px; // 表格圆角
    --v-r-si-big: calc(var(--v-r-t-big)- 2px); // 标准圆角内的小圆角
    --v-r-tag-big: 0.5em; // 标签圆角
    // --v-tag-small-radius-big: 0.25em; // 标签小圆角
    --v-r-c-big: 50%; // 半距圆角
}
// ---
// 应用大号圆角
.applyThemeRadius(@themeRadius) when (@themeRadius = big) {
    :root {
        --v-r-b: var(--v-r-b-big); // 标准圆角
        --v-r-s: var(--v-r-s-big); // 标准圆角内的小圆角
        --v-r-t: var(--v-r-t-big); // 表格圆角
        --v-r-si:calc(var(--v-r-t) - 2px); // 标准圆角内的小圆角
        --v-r-tag: var(--v-r-tag-big); // 标签圆角
        // --v-tag-small-radius: var(--v-tag-small-radius-big); // 标签小圆角
        --v-r-c: var(--v-r-c-big); // 半距圆角
    }
}
// ---
// 应用小号圆角
.applyThemeRadius(@themeRadius) when (@themeRadius = small) {
    :root {
        --v-r-b: var(--v-r-b-small); // 标准圆角
        --v-r-s: var(--v-r-s-small); // 标准圆角内的小圆角
        --v-r-t: var(--v-r-t-small); // 表格圆角
        --v-r-si:calc(var(--v-r-t) - 2px); // 标准圆角内的小圆角
        --v-r-tag: var(--v-r-tag-small); // 标签圆角
        // --v-tag-small-radius: var(--v-tag-small-radius-small); // 标签小圆角
        --v-r-c: var(--v-r-c-small); // 半距圆角
    }
}
// ---
// 应用无圆角
.applyThemeRadius(@themeRadius) when (@themeRadius = none) {
    :root {
        --v-r-b: 0; // 标准圆角
        --v-r-s: 0; // 标准圆角内的小圆角
        --v-r-t: 0; // 表格圆角
        --v-r-si: calc(var(--v-r-t) - 2px); // 标准圆角内的小圆角
        --v-r-tag: 0; // 标签圆角
        // --v-tag-small-radius: var(--v-tag-small-radius-small); // 标签小圆角
        --v-r-c: 0; // 半距圆角
    }
}